<template>
   <div class="demo6-box">
      <div class="search">
         <borderBox @options="options" :activeTime="activeTime" :timeData="timeData" />
      </div>
      <div ref="target" class="content"></div>
   </div>
</template>
<script setup>
import * as echarts from "echarts";
import borderBox from '@/components/firm/borderBox.vue'
import { ref, onMounted, watch } from "vue";
let activeTime = ref(0)
let timeData = ref([
   {
      time: '年',
      i: 0
   },
   {
      time: '季',
      i: 1
   },
   {
      time: '月',
      i: 2
   }
])
let accountsIncome = ref([319, 998, 512, 198, 766])
let synchronization = ref([20, 12, 52, 40, 25])
let target = ref(null);
let myChart = null;
// 选择的时间
const options = (v, i) => {
   activeTime.value = i
}
onMounted(() => {
   myChart = echarts.init(target.value);
   renderChart();
});

let date = ref([ '2020年', '2021年', '2022年', '2023年','2024年'])
let option = {
   color: ['#0C65F6', '#00FFA6', '#F4DF58'],
   grid: {
      left: '0%',
      right: '0%',
      bottom: '15%',
      top: '15%',
   },
   legend: {
      icon: 'rect',
      x: 'center',
      y: '0%',
      orient: 'horizontal',
      itemWidth: 12,
      itemHeight: 12,
      formatter: ['{a|{name}}'].join('\n'),
      textStyle: {
         color: '#fff',
         height: 8,
         rich: {
            a: {
               verticalAlign: 'bottom',
            },
         },
      },
      data: ['账款收入', '同期增长'],
   },
   tooltip: {
      confine: true,
      trigger: 'axis',
      axisPointer: {
         type: 'shadow',
      },
      textStyle: {
         color: '#fff',
         fontSize: 12,
         lineHeight: 24,
      },
      padding: [5, 10],
      backgroundColor: 'rgba(0, 0, 0, 0.50)',
      formatter(params) {	// 根据条件修改
         let unit = '个'
         let relVal = params[0].name
         for (let i = 0; i < params.length; i++) {
            if (i === 1) {
               unit = '%'
            }
            if (params[i].seriesName) {
               if (typeof (params[i].color) === 'string') {
                  relVal += `<div style="display:flex;align-items:center"><div style="width: 13px;height: 5px; margin-right: 5px; background: ${params[i].color}"></div><div style="padding-right: 20px">${params[i].seriesName}</div>${params[i].value} ${unit}</div>`
               } else {
                  relVal += `<div style="display:flex;align-items:center"><div style="width: 13px;height: 5px; margin-right: 5px; background: ${params[i].color.colorStops[0].color}"></div><div style="padding-right: 20px">${params[i].seriesName}</div>${params[i].value}万</div>`
               }
            }
         }
         return relVal
      },
   },
   xAxis: {
      type: 'category',
      data: date.value,
      axisLine: {
         lineStyle: {
            color: 'rgba(255,255,255,0.45)',
         },
      },
      axisLabel: {
         color: '#fff',
      },
      axisTick: {
         show: false,
      },
   },
   yAxis: [{
      type: 'value',
      min: 0,
      minInterval: 1,
      splitArea: {
         show: false,
      },
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         lineStyle: {
            color: 'rgba(255, 255, 255, 0.15)',
            // type: 'dashed', // dotted 虚线
         },
      },
      axisLabel: {
         color: '#fff',
      },
   }, {
      type: 'value',
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         show: false,
      },
      axisLabel: {
         formatter: '{value}%', // 右侧Y轴文字显示
         color: '#fff',
      },
      splitArea: {
         show: false,
      },
   }],
   series: [
      { // 柱底圆片
         name: '',
         type: 'pictorialBar',
         symbolSize: [16.1, 9], // 调整截面形状
         z: 1,
         symbolOffset: [0, 3],
         itemStyle: {
            color: '#00ABFF',
         },
         data: accountsIncome.value,
      },
      {
         name: '账款收入',
         type: 'bar',
         z: 2,
         barWidth: 16,
         barMinHeight: 10,
         itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: '#00D5FF' },
               { offset: 1, color: '#00ABFF' },
            ]),
         },
         data: accountsIncome.value,
      },
      { // 柱顶圆片
         name: '',
         type: 'pictorialBar',
         symbolSize: [16, 9], // 调整截面形状
         symbolOffset: [0, -4],
         z: 3,
         symbolPosition: 'end',
         itemStyle: {
            color: '#008FDF',
         },
         data: accountsIncome.value,
      },
      {
         name: '同期增长',
         type: 'line',
         yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用quanmei
         z: 4,
         smooth: false, // 平滑曲线显示
         symbol: 'circle', // 标记的图形为实心圆
         symbolSize: 8, // 标记的大小
         data: synchronization.value,
         itemStyle: { color: '#FFCF5F' },
      },
   ],
};

watch(() => activeTime.value, (v) => {
   switch (v) {
      case 0:
         accountsIncome.value = [319, 998, 512, 198, 766]
         synchronization.value = [20, 12, 52, 40, 25]
         option = {
   color: ['#0C65F6', '#00FFA6', '#F4DF58'],
   grid: {
      left: '0%',
      right: '0%',
      bottom: '15%',
      top: '15%',
   },
   legend: {
      icon: 'rect',
      x: 'center',
      y: '0%',
      orient: 'horizontal',
      itemWidth: 12,
      itemHeight: 12,
      formatter: ['{a|{name}}'].join('\n'),
      textStyle: {
         color: '#fff',
         height: 8,
         rich: {
            a: {
               verticalAlign: 'bottom',
            },
         },
      },
      data: ['账款收入', '同期增长'],
   },
   tooltip: {
      confine: true,
      trigger: 'axis',
      axisPointer: {
         type: 'shadow',
      },
      textStyle: {
         color: '#fff',
         fontSize: 12,
         lineHeight: 24,
      },
      padding: [5, 10],
      backgroundColor: 'rgba(0, 0, 0, 0.50)',
      formatter(params) {	// 根据条件修改
         let unit = '个'
         let relVal = params[0].name
         for (let i = 0; i < params.length; i++) {
            if (i === 1) {
               unit = '%'
            }
            if (params[i].seriesName) {
               if (typeof (params[i].color) === 'string') {
                  relVal += `<div style="display:flex;align-items:center"><div style="width: 13px;height: 5px; margin-right: 5px; background: ${params[i].color}"></div><div style="padding-right: 20px">${params[i].seriesName}</div>${params[i].value} 万</div>`
               } else {
                  relVal += `<div style="display:flex;align-items:center"><div style="width: 13px;height: 5px; margin-right: 5px; background: ${params[i].color.colorStops[0].color}"></div><div style="padding-right: 20px">${params[i].seriesName}</div>${params[i].value} ${unit}</div>`
               }
            }
         }
         return relVal
      },
   },
   xAxis: {
      type: 'category',
      data: date.value,
      axisLine: {
         lineStyle: {
            color: 'rgba(255,255,255,0.45)',
         },
      },
      axisLabel: {
         color: '#fff',
      },
      axisTick: {
         show: false,
      },
   },
   yAxis: [{
      type: 'value',
      min: 0,
      minInterval: 1,
      splitArea: {
         show: false,
      },
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         lineStyle: {
            color: 'rgba(255, 255, 255, 0.15)',
            // type: 'dashed', // dotted 虚线
         },
      },
      axisLabel: {
         color: '#fff',
      },
   }, {
      type: 'value',
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         show: false,
      },
      axisLabel: {
         formatter: '{value}%', // 右侧Y轴文字显示
         color: '#fff',
      },
      splitArea: {
         show: false,
      },
   }],
   series: [
      { // 柱底圆片
         name: '',
         type: 'pictorialBar',
         symbolSize: [16.1, 9], // 调整截面形状
         z: 1,
         symbolOffset: [0, 3],
         itemStyle: {
            color: '#00ABFF',
         },
         data: accountsIncome.value,
      },
      {
         name: '账款收入',
         type: 'bar',
         z: 2,
         barWidth: 16,
         barMinHeight: 10,
         itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: '#00D5FF' },
               { offset: 1, color: '#00ABFF' },
            ]),
         },
         data: accountsIncome.value,
      },
      { // 柱顶圆片
         name: '',
         type: 'pictorialBar',
         symbolSize: [16, 9], // 调整截面形状
         symbolOffset: [0, -4],
         z: 3,
         symbolPosition: 'end',
         itemStyle: {
            color: '#008FDF',
         },
         data: accountsIncome.value,
      },
      {
         name: '同期增长',
         type: 'line',
         yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用quanmei
         z: 4,
         smooth: false, // 平滑曲线显示
         symbol: 'circle', // 标记的图形为实心圆
         symbolSize: 8, // 标记的大小
         data: synchronization.value,
         itemStyle: { color: '#FFCF5F' },
      },
   ],
};
         renderChart()
         break;
      case 1:
         accountsIncome.value = [200, 100, 24, 98, 37]
         synchronization.value = [63, 98, 75, 40, 61]
        option = {
   color: ['#0C65F6', '#00FFA6', '#F4DF58'],
   grid: {
      left: '0%',
      right: '0%',
      bottom: '15%',
      top: '15%',
   },
   legend: {
      icon: 'rect',
      x: 'center',
      y: '0%',
      orient: 'horizontal',
      itemWidth: 12,
      itemHeight: 12,
      formatter: ['{a|{name}}'].join('\n'),
      textStyle: {
         color: '#fff',
         height: 8,
         rich: {
            a: {
               verticalAlign: 'bottom',
            },
         },
      },
      data: ['账款收入', '同期增长'],
   },
   tooltip: {
      confine: true,
      trigger: 'axis',
      axisPointer: {
         type: 'shadow',
      },
      textStyle: {
         color: '#fff',
         fontSize: 12,
         lineHeight: 24,
      },
      padding: [5, 10],
      backgroundColor: 'rgba(0, 0, 0, 0.50)',
      formatter(params) {	// 根据条件修改
         let unit = '个'
         let relVal = params[0].name
         for (let i = 0; i < params.length; i++) {
            if (i === 1) {
               unit = '%'
            }
            if (params[i].seriesName) {
               if (typeof (params[i].color) === 'string') {
                  relVal += `<div style="display:flex;align-items:center"><div style="width: 13px;height: 5px; margin-right: 5px; background: ${params[i].color}"></div><div style="padding-right: 20px">${params[i].seriesName}</div>${params[i].value} ${unit}</div>`
               } else {
                  relVal += `<div style="display:flex;align-items:center"><div style="width: 13px;height: 5px; margin-right: 5px; background: ${params[i].color.colorStops[0].color}"></div><div style="padding-right: 20px">${params[i].seriesName}</div>${params[i].value} ${unit}</div>`
               }
            }
         }
         return relVal
      },
   },
   xAxis: {
      type: 'category',
      data: date.value,
      axisLine: {
         lineStyle: {
            color: 'rgba(255,255,255,0.45)',
         },
      },
      axisLabel: {
         color: '#fff',
      },
      axisTick: {
         show: false,
      },
   },
   yAxis: [{
      type: 'value',
      min: 0,
      minInterval: 1,
      splitArea: {
         show: false,
      },
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         lineStyle: {
            color: 'rgba(255, 255, 255, 0.15)',
            // type: 'dashed', // dotted 虚线
         },
      },
      axisLabel: {
         color: '#fff',
      },
   }, {
      type: 'value',
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         show: false,
      },
      axisLabel: {
         formatter: '{value}%', // 右侧Y轴文字显示
         color: '#fff',
      },
      splitArea: {
         show: false,
      },
   }],
   series: [
      { // 柱底圆片
         name: '',
         type: 'pictorialBar',
         symbolSize: [16.1, 9], // 调整截面形状
         z: 1,
         symbolOffset: [0, 3],
         itemStyle: {
            color: '#00ABFF',
         },
         data: accountsIncome.value,
      },
      {
         name: '账款收入',
         type: 'bar',
         z: 2,
         barWidth: 16,
         barMinHeight: 10,
         itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: '#00D5FF' },
               { offset: 1, color: '#00ABFF' },
            ]),
         },
         data: accountsIncome.value,
      },
      { // 柱顶圆片
         name: '',
         type: 'pictorialBar',
         symbolSize: [16, 9], // 调整截面形状
         symbolOffset: [0, -4],
         z: 3,
         symbolPosition: 'end',
         itemStyle: {
            color: '#008FDF',
         },
         data: accountsIncome.value,
      },
      {
         name: '同期增长',
         type: 'line',
         yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用quanmei
         z: 4,
         smooth: false, // 平滑曲线显示
         symbol: 'circle', // 标记的图形为实心圆
         symbolSize: 8, // 标记的大小
         data: synchronization.value,
         itemStyle: { color: '#FFCF5F' },
      },
   ],
};
         renderChart()
         break;
      case 2:
         accountsIncome.value = [200, 454, 787, 445, 14]
         synchronization.value = [99, 64, 75, 64, 87]
        option = {
   color: ['#0C65F6', '#00FFA6', '#F4DF58'],
   grid: {
      left: '0%',
      right: '0%',
      bottom: '15%',
      top: '15%',
   },
   legend: {
      icon: 'rect',
      x: 'center',
      y: '0%',
      orient: 'horizontal',
      itemWidth: 12,
      itemHeight: 12,
      formatter: ['{a|{name}}'].join('\n'),
      textStyle: {
         color: '#fff',
         height: 8,
         rich: {
            a: {
               verticalAlign: 'bottom',
            },
         },
      },
      data: ['账款收入', '同期增长'],
   },
   tooltip: {
      confine: true,
      trigger: 'axis',
      axisPointer: {
         type: 'shadow',
      },
      textStyle: {
         color: '#fff',
         fontSize: 12,
         lineHeight: 24,
      },
      padding: [5, 10],
      backgroundColor: 'rgba(0, 0, 0, 0.50)',
      formatter(params) {	// 根据条件修改
         let unit = '个'
         let relVal = params[0].name
         for (let i = 0; i < params.length; i++) {
            if (i === 1) {
               unit = '%'
            }
            if (params[i].seriesName) {
               if (typeof (params[i].color) === 'string') {
                  relVal += `<div style="display:flex;align-items:center"><div style="width: 13px;height: 5px; margin-right: 5px; background: ${params[i].color}"></div><div style="padding-right: 20px">${params[i].seriesName}</div>${params[i].value} ${unit}</div>`
               } else {
                  relVal += `<div style="display:flex;align-items:center"><div style="width: 13px;height: 5px; margin-right: 5px; background: ${params[i].color.colorStops[0].color}"></div><div style="padding-right: 20px">${params[i].seriesName}</div>${params[i].value} 万</div>`
               }
            }
         }
         return relVal
      },
   },
   xAxis: {
      type: 'category',
      data: date.value,
      axisLine: {
         lineStyle: {
            color: 'rgba(255,255,255,0.45)',
         },
      },
      axisLabel: {
         color: '#fff',
      },
      axisTick: {
         show: false,
      },
   },
   yAxis: [{
      type: 'value',
      min: 0,
      minInterval: 1,
      splitArea: {
         show: false,
      },
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         lineStyle: {
            color: 'rgba(255, 255, 255, 0.15)',
            // type: 'dashed', // dotted 虚线
         },
      },
      axisLabel: {
         color: '#fff',
      },
   }, {
      type: 'value',
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         show: false,
      },
      axisLabel: {
         formatter: '{value}%', // 右侧Y轴文字显示
         color: '#fff',
      },
      splitArea: {
         show: false,
      },
   }],
   series: [
      { // 柱底圆片
         name: '',
         type: 'pictorialBar',
         symbolSize: [16.1, 9], // 调整截面形状
         z: 1,
         symbolOffset: [0, 3],
         itemStyle: {
            color: '#00ABFF',
         },
         data: accountsIncome.value,
      },
      {
         name: '账款收入',
         type: 'bar',
         z: 2,
         barWidth: 16,
         barMinHeight: 10,
         itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: '#00D5FF' },
               { offset: 1, color: '#00ABFF' },
            ]),
         },
         data: accountsIncome.value,
      },
      { // 柱顶圆片
         name: '',
         type: 'pictorialBar',
         symbolSize: [16, 9], // 调整截面形状
         symbolOffset: [0, -4],
         z: 3,
         symbolPosition: 'end',
         itemStyle: {
            color: '#008FDF',
         },
         data: accountsIncome.value,
      },
      {
         name: '同期增长',
         type: 'line',
         yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用quanmei
         z: 4,
         smooth: false, // 平滑曲线显示
         symbol: 'circle', // 标记的图形为实心圆
         symbolSize: 8, // 标记的大小
         data: synchronization.value,
         itemStyle: { color: '#FFCF5F' },
      },
   ],
};
         renderChart()
         break;

      default:
         break;
   }
})
const renderChart = () => {
   myChart.setOption(option);

   // 图表自适应
   window.addEventListener('resize', () => {
      myChart.resize()
   })
};
</script>
<style scoped lang='scss'>
.demo6-box {
   width: 100%;
   height: 100%;
   cursor: pointer;
   position: relative;

   .search {
      z-index: 3000;
      box-sizing: border-box;
      font-family: PangMen;
      position: absolute;
      right: 0%;
      top: -5%;
      align-items: center;
      justify-content: space-between;
      color: #0290FF;
      width: 25%;
      display: flex;

   }

   .content {
      width: 100%;
      height: 100%;
   }
}
</style>
